<template>
  <!-- prettier-ignore -->
  <div>
    
    <div class="pl20 pr20">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="部门" prop="中文key">
              <el-input v-model="form.中文key"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="员工" prop="中文key">
              <el-input v-model="form.中文key"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="月份" prop="中文key">
              <el-input v-model="form.中文key"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 
        <el-form-item label="活动名称" prop="attr2">
          <el-input v-model="form.attr2"></el-input>
        </el-form-item> -->
        <!-- 注意： el-form-item 里绑定操作用的属性是 prop -->
      </el-form>
    </div>
    
    <div class="pt5 pb10">
      <el-button size="small" type="primary" @click="search()" :loading="loading">
        <i class="fa fa-fw iconfont icon-search"></i>查询
      </el-button>
      <el-button size="small" type="warning" @click="reset()" :loading="loading">
        <i class="fa fa-fw iconfont icon-reset"></i>重置
      </el-button>
      <el-button size="small" type="info" plain @click="refresh()" :loading="loading">
        <i class="fa fa-fw iconfont icon-refresh"></i>刷新
      </el-button>
    </div>

    <el-table
      size="mini"
      :data="tableData"
      style="width: 100%"
      row-key="id"
      header-row-class-name="info-row"
      highlight-current-row
      :row-class-name="tableRowClassName"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column prop="" label="" width="40px" fixed="left"> </el-table-column>
      <el-table-column prop="部门" label="部门" fixed="left">
        <template slot-scope="scope">{{ scope.row.部门 }}</template>
      </el-table-column>
      <el-table-column prop="员工" label="员工" fixed="left">
        <template slot-scope="scope">{{ scope.row.员工 }}</template>
      </el-table-column>
      <el-table-column prop="添加数" label="添加数" sortable min-width="90px">
        <template slot-scope="scope">{{ scope.row.添加数 }}</template>
      </el-table-column>
      <el-table-column prop="添加成本" label="添加成本" sortable min-width="104px">
        <template slot-scope="scope">{{ scope.row.添加成本 }}</template>
      </el-table-column>
      <el-table-column prop="表单数" label="表单数" sortable min-width="90px">
        <template slot-scope="scope">{{ scope.row.表单数 }}</template>
      </el-table-column>
      <el-table-column prop="表单成本" label="表单成本" sortable min-width="104px">
        <template slot-scope="scope">{{ scope.row.表单成本 }}</template>
      </el-table-column>
      <el-table-column prop="总成本" label="总成本" sortable min-width="90px">
        <template slot-scope="scope">{{ scope.row.总成本 }}</template>
      </el-table-column>
      <el-table-column prop="资源业绩" label="资源业绩" sortable min-width="104px">
        <template slot-scope="scope">{{ scope.row.资源业绩 }}</template>
      </el-table-column>
      <el-table-column prop="资源投产" label="资源投产" sortable min-width="104px">
        <template slot-scope="scope">{{ scope.row.资源投产 }}</template>
      </el-table-column>
      <el-table-column prop="总业绩" label="总业绩" sortable min-width="90px">
        <template slot-scope="scope">{{ scope.row.总业绩 }}</template>
      </el-table-column>
      <el-table-column prop="投产比" label="投产比" sortable min-width="90px">
        <template slot-scope="scope">{{ scope.row.投产比 }}</template>
      </el-table-column>
      <el-table-column prop="季度业绩" label="季度业绩" sortable min-width="104px">
        <template slot-scope="scope">{{ scope.row.季度业绩 }}</template>
      </el-table-column>
      <el-table-column prop="季度投产比" label="季度投产比" sortable min-width="120px">
        <template slot-scope="scope">{{ scope.row.季度投产比 }}</template>
      </el-table-column>
      <el-table-column prop="升级业绩" label="升级业绩" sortable min-width="104px">
        <template slot-scope="scope">{{ scope.row.升级业绩 }}</template>
      </el-table-column>
      <el-table-column prop="升级比" label="升级比" sortable min-width="90px">
        <template slot-scope="scope">{{ scope.row.升级比 }}</template>
      </el-table-column>
      <el-table-column prop="业绩退款额" label="业绩退款额" sortable min-width="120px">
        <template slot-scope="scope">{{ scope.row.业绩退款额 }}</template>
      </el-table-column>
      <el-table-column prop="业绩退款率" label="业绩退款率" sortable min-width="120px">
        <template slot-scope="scope">{{ scope.row.业绩退款率 }}</template>
      </el-table-column>
      <el-table-column prop="总退款额" label="总退款额" sortable min-width="104px">
        <template slot-scope="scope">{{ scope.row.总退款额 }}</template>
      </el-table-column>
      <el-table-column prop="总退款率" label="总退款率" sortable min-width="104px">
        <template slot-scope="scope">{{ scope.row.总退款率 }}</template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
let rules = {
  string: [
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 个字符', trigger: 'blur' },
  ],
};

export default {
  name: 'index',
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',

      form: {
        中文key: '',
        attr2: '',
      }, //用来绑定参数，接受验证，但后面用computed来收集
      loading: false,

      rules: {
        //可以其他地方定义后引用
        attr2: rules.string,
      }, // 验证在 这种查表的页面 需求不大，在某条数据操作修改的需求更大
      sourceData: [
        { 部门: '累计', 员工: '' },
        { 部门: '新单1组', 员工: '', children: [1, 2, 3] },
        { 部门: '新单2组', 员工: '', children: [1, 2, 3] },
        { 部门: '新单3组', 员工: '', children: [1] },
      ],

      page: {
        current: 1,
        total: 400,
        sizes: [10, 20],
        size: 10,
      },
    };
  },
  computed: {
    conditionParameters: function () {
      let t = this.form;
      return {
        key: t.中文key, //提交给接口的key，和直接与页面相符的中文key
      };
    }, // this.data.form 整合前端的操作，转key/value作为参数给后端在这里更合适一点
    tableData: function () {
      let s = this.sourceData;
      // 建议在 data.sourceData 中缓存接口给出的原始数据，再根据实际需求自行处理
      // 实际需求包括且不限于：字段格式化，前端分页，reduce成树形格式配合折叠使用……
      if (s.length == 0) {
        return [];
      }
      return s.map((v, i) => {
        if (this._.has(v, 'children')) {
          v.children = v.children.map((v1, i1) => {
            return {
              id: (i + 1) * 10 + i1,
              部门: v.部门,
              员工: this.$mock.mock('@cname'),
              添加数: this.$mock.mock('@natural(1000,3000)'),
              添加成本: this.$mock.mock('@float(1000, 3000, 2,2)'),
              表单数: this.$mock.mock('@natural(1000,3000)'),
              表单成本: this.$mock.mock('@float(1000, 3000, 2,2)'),
              总成本: this.$mock.mock('@float(1000, 3000, 2,2)'),
              资源业绩: this.$mock.mock('@float(1000, 3000, 2,2)'),
              资源投产: this.$mock.mock('@float(1000, 3000, 2,2)'),
              总业绩: this.$mock.mock('@float(1000, 3000, 2,2)'),
              投产比: this.$mock.mock('@float(0, 10, 2,2)'),
              季度业绩: this.$mock.mock('@float(1000, 3000, 2,2)'),
              季度投产比: this.$mock.mock('@float(0, 10, 2,2)'),
              升级业绩: this.$mock.mock('@float(1000, 3000, 2,2)'),
              升级比: this.$mock.mock('@float(0, 10, 2,2)'),
              业绩退款额: this.$mock.mock('@float(1000, 3000, 2,2)'),
              业绩退款率: this.$mock.mock('@float(0, 10, 2,2)'),
              总退款额: this.$mock.mock('@float(1000, 3000, 2,2)'),
              总退款率: this.$mock.mock('@float(0, 10, 2,2)'),
            };
          });
        }
        return Object.assign(v, {
          id: i + 1,
          添加数: this.$mock.mock('@natural(1000,3000)'),
          添加成本: this.$mock.mock('@float(1000, 3000, 2,2)'),
          表单数: this.$mock.mock('@natural(1000,3000)'),
          表单成本: this.$mock.mock('@float(1000, 3000, 2,2)'),
          总成本: this.$mock.mock('@float(1000, 3000, 2,2)'),
          资源业绩: this.$mock.mock('@float(1000, 3000, 2,2)'),
          资源投产: this.$mock.mock('@float(1000, 3000, 2,2)'),
          总业绩: this.$mock.mock('@float(1000, 3000, 2,2)'),
          投产比: this.$mock.mock('@float(0, 10, 2,2)'),
          季度业绩: this.$mock.mock('@float(1000, 3000, 2,2)'),
          季度投产比: this.$mock.mock('@float(0, 10, 2,2)'),
          升级业绩: this.$mock.mock('@float(1000, 3000, 2,2)'),
          升级比: this.$mock.mock('@float(0, 10, 2,2)'),
          业绩退款额: this.$mock.mock('@float(1000, 3000, 2,2)'),
          业绩退款率: this.$mock.mock('@float(0, 10, 2,2)'),
          总退款额: this.$mock.mock('@float(1000, 3000, 2,2)'),
          总退款率: this.$mock.mock('@float(0, 10, 2,2)'),
        });
      });
    }, // 实际显示数据的位置
  },
  methods: {
    test: function () {},
    tableRowClassName: function ({ row, rowIndex }) {
      if (row.员工 == '') {
        return 'text-red bg-grey100';
      } else {
        return 'bg-grey95';
      }
    },
    resetForm(formName) {
      //因为额外的功能（比如reset）才需要在 el-form 上 :model 绑定，
      this.$refs[formName].resetFields();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  beforeCreate: function () {},
  created: function () {},
  beforeMount: function () {},
  mounted: function () {
    console.log();
  },
  beforeUpdate: function () {},
  updated: function () {},
  beforeDestroy: function () {},
  destroyed: function () {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>